<template>
  <div class="box">
    <!-- <van-popup v-model="show" position="top" :style="{ height: '30%' }" /> -->
    <div class="zzc" v-show="show">
      <ul v-show="flag">
        <li><button @click="cut">切换主题</button></li>
        <li><button>下载数据</button></li>
        <li><button>导入主题</button></li>
        <li><button>编辑数据</button></li>
        <li><button>清空数据</button></li>
      </ul>
      <ul v-show="!flag">
        <li v-for="(item, index) in col" :key="index">
          <button @click="bc(index)">{{ item }}</button>
        </li>
        <li><button @click="fh">返回</button></li>
      </ul>
    </div>
  </div>
</template>

<script>
import Bus from "@/Bus";
export default {
  components: {},
  name: "",
  data() {
    return {
      show: false,
      flag: true,
      col: ["粉色", "蓝色", "黄色"],
    };
  },
  mounted() {
     //左侧导航显示隐藏
    Bus.$on("showPopup", (data) => {
      this.show = data;
    });
  },
  methods: {
    //主题栏切换
    cut() {
      this.flag = !this.flag;
    },
    fh() {
      this.flag = !this.flag;
    },
    //颜色切换
    bc(index) {
      Bus.$emit("bc", index);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.zzc {
  width: 60%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  transition: all 3s;
}
ul {
  z-index: 99;
}
.van-cell--clickable {
  background-color: pink;
}
</style>
